<script setup>

import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {useUserInfoStore} from "@/stores/userInfo";
import {deleteOrders, insertOrders, updateOrders, ordersList} from "@/api/orders";
import {ElMessage, ElMessageBox} from "element-plus";
//分页条数据模型
const pageNo = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(5)//每页条数
const ordersListData = ref([])
const dialogVisible = ref(false)
const titleName = ref('')
const userInfoStore = useUserInfoStore();
// 订单添加、编辑表单数据模型
const formData = ref({
  orderNumber: '',
  typeid: '',
  customerid: '',
  startTime:'',
  endTime: '',
  routeDescription: '',
  totalDistance: '',
  status: '',
  totalAmount: '',
  paymentStatus: '',
  createdAt: ''
})
const form = ref(null)
const formLabelWidth = '140px'
// 获取订单列表数据
const getOrdersList = ()=>{
  const params = {
    params:{
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      orderNumber : formData.value.orderNumber,
      typeid: formData.value.typeid,
      customerid: localStorage.getItem('userid'),
    }
  }
  // 发送请求
  ordersList(params).then(res=>{
    ordersListData.value= res.data.records
    total.value= res.data.count
  })

}
//
onMounted(()=>{
  getOrdersList()
})
// 重置
const resetParams = ()=>{
  formData.value.orderNumber = ''
  formData.value.typeid = ''
  formData.value.customerid = ''
  formData.value.startTime = ''
  formData.value.endTime = ''
  formData.value.routeDescription = ''
  formData.value.totalDistance = ''
  formData.value.status = ''
  formData.value.totalAmount = ''
  formData.value.paymentStatus = ''
  formData.value.createdAt = ''
  getOrdersList()
}

// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val
  getOrdersList()
}
// 当当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNo.value = val
  getOrdersList()
}
// 删除订单
const deleteById=(obj)=>{
  ElMessageBox.confirm(
      '确认支付订单吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {

        if( obj.paymentStatus=="已支付") {
          ElMessage.warning("已支付过");
         return;
        }
        console.log(888)
        obj.paymentStatus="已支付"
        updateOrders(obj).then(res=>{
          if (res.success) {
            ElMessage.success("支付成功");
            getOrdersList()
          }
        })
        /*deleteOrders({id:id}).then(res=>{
          if (res.success) {
            ElMessage.success(res.message)
            getOrdersList()
          }
        })*/

      })
      .catch(() => {
      })
}

// 订单添加打开dialog
const showAddDialog =(title)=>{
  dialogVisible.value = true
  titleName.value = title
  form.value.resetFields()
}

// 订单添加
const addOrders = () => {
  form.value.validate((valid)=>{
    if (valid) {

      if (formData.value.createdAt)formData.value.createdAt= JSON.stringify(formData.value.createdAt).replace("T", " ").replace('"', '').split(".")[0];
      insertOrders(formData.value).then(res=>{
        if (res.success) {
          ElMessage.success(res.message)
          dialogVisible.value= false
          resetParams()
        }
      })
    }
  })
}

// 清空表单

// 打开编辑dialog
const showEditDialog=(row,title)=>{
  formData.value= {...row}
  titleName.value = title
  dialogVisible.value = true
}
// 更新订单
const editOrders=()=>{
  if (formData.value.createdAt)formData.value.createdAt= JSON.stringify(formData.value.createdAt).replace("T", " ").replace('"', '').split(".")[0];

  updateOrders(formData.value).then(res=>{
    if (res.success) {
      ElMessage.success(res.message)
      dialogVisible.value= false
      resetParams()
    }
  })
}
const dialogVisibleClose=()=>{
  dialogVisible.value= false
  resetParams()
}
// 表单校验
const rules = {
  ordersname: [
    {required: true, message: '请输入订单名', trigger: 'blur'},
    {min: 3, max: 16, message: '长度为3-16位', trigger: 'blur'},
  ]
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>订单管理</span>
        <div class="extra">
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="订单编号：">
        <el-input v-model="formData.orderNumber" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="订单类型：">
        <el-input v-model="formData.typeid" placeholder="请输入订单类型"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOrdersList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 订单列表 -->
    <el-table :data="ordersListData" style="width: 100%">
      <el-table-column label="订单编号"  prop="orderNumber"></el-table-column>
      <el-table-column label="订单类型"  prop="typeid"></el-table-column>
      <el-table-column label="顾客编号"  prop="customerid"></el-table-column>
      <el-table-column label="开始时间"  prop="startTime"></el-table-column>
      <el-table-column label="结束时间"  prop="endTime"></el-table-column>
      <el-table-column label="行程描述"  prop="routeDescription"></el-table-column>
      <el-table-column label="预计总里程"  prop="totalDistance"></el-table-column>
      <el-table-column label="订单总金额"  prop="totalAmount"></el-table-column>
      <el-table-column label="支付状态"  prop="paymentStatus"></el-table-column>
      <el-table-column label="创建时间"  prop="createdAt"></el-table-column>


      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button size="large" circle plain type="danger" @click="deleteById(row)">支付</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>

<!--  添加订单对话框-->
  <el-dialog
      v-model="dialogVisible"
      :title="titleName"
      width="500"
  >
    <el-form ref="form" :rules="rules" :model="formData" label-width="auto" style="max-width: 600px">
      <el-form-item  label="订单编号" prop="orderNumber">
        <el-input type="text" v-model="formData.orderNumber"  />
      </el-form-item>
      <el-form-item label="订单类型" prop="typeid">
        <el-input type="text" v-model="formData.typeid"  />
      </el-form-item>
      <el-form-item label="顾客编号" prop="customerid">
        <el-input type="text" v-model="formData.customerid"  />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-input type="text" v-model="formData.startTime"  />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-input type="text" v-model="formData.endTime"  />
      </el-form-item>
      <el-form-item label="行程描述" prop="routeDescription">
        <el-input type="text" v-model="formData.routeDescription"  />
      </el-form-item>
      <el-form-item label="预计总里程" prop="totalDistance">
        <el-input type="text" v-model="formData.totalDistance"  />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input type="text" v-model="formData.status"  />
      </el-form-item>
      <el-form-item label="订单总金额" prop="totalAmount">
        <el-input type="text" v-model="formData.totalAmount"  />
      </el-form-item>
      <el-form-item label="支付状态" prop="paymentStatus">
        <el-input type="text" v-model="formData.paymentStatus"  />
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt">
        <el-input type="text" v-model="formData.createdAt"  />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleClose">取消</el-button>
        <el-button type="primary" @click="titleName==='添加订单'?addOrders():editOrders()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>